<template>
  <div class="avater">
    <div class="avatar-item" v-for="(item, index) in 20">
      <img :src="imgUrl(index)" alt="" class="img-avatar">
      <img src="@/assets/images/icon-avatar-selected.png" alt=""
           class="icon-avatar"
           v-if="selectedIndex === index"
      >
<!--      <img src="../../assets/images/icon-avatar-img1.png" alt="">-->
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { profile, upload } from '@/api/index.js'
const selectedIndex = ref(0)
const imgUrl = computed(() => {
  return (index) => {
    // 只能用相对路径，不能用@
    return new URL(`../../assets/images/icon-avatar-img${index+1}.png`, import.meta.url).href
  }
})
</script>
<style scoped>
.avater{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(64px,64px));
  grid-column-gap: 28px;
  grid-row-gap: 12px;
  align-content: center;
  padding: 0 27px
}

.avater .avatar-item{
  width: 64px;
  height: 64px;
  margin: 8px;
  position: relative;
  border-radius: 100%;
  cursor: pointer
}

.avater .avatar-item .img-avatar{
  width: 64px;
  height: 64px;
  border-radius: 100%
}

.avater .avatar-item .icon-avatar{
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 0;
  right: -5px
}
</style>